<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商城产品信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: summernote-css" />

</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-product-add">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">归属店铺：</label>
                <div class="col-sm-8">
                    <input  id="shopId" name="shopId" class="form-control" type="hidden"  required>

                    <input   id="shopName"  name="shopName" class="form-control" type="text" onclick="openUser()"  required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品名称：</label>
                <div class="col-sm-8">
                    <input name="productName" class="form-control" type="text" required>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品大类:</label>

                <div class="col-sm-8">
                    <select class="form-control" id="typeId" name="typeId">
                        <option value="">请产品大类</option>
                    </select>

                </div>
            </div>
            <div class= " form-group" >
                <label class="col-sm-3 control-label is-required">产品小类:</label>

                <div class="col-sm-8">
                    <select class="form-control" id="levelId" name="levelId">
                        <option value="">请产品小类</option>
                    </select>
                </div>
            </div>

<!--            <div class="form-group">
                <label class="col-sm-3 control-label">产品图片：</label>

                <div class="col-sm-8">
                    <input id="photoOssIdsFile" accept="image/jpg,image/jpeg,image/png" name="file"  class="form-control" type="file">
                    <img style="width: 80px ;height: auto;"  th:src="*{photoOssIds}" id="photoOssIdsImg"  />
                    <input style="display: none" id="photoOssIds" name="photoOssIds" class="form-control" th:value="*{photoOssIds}"   type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">产品图片2：</label>

                <div class="col-sm-8">
                    <input id="photoOssIdFile" accept="image/jpg,image/jpeg,image/png" name="file"  class="form-control" type="file">
                    <img style="width: 80px ;height: auto;"  th:src="*{photoOssId}" id="photoOssIdImg"  />
                    <input style="display: none" id="photoOssId" name="photoOssId" class="form-control" th:value="*{photoOssId}"   type="text">
                </div>


            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">产品轮播图：</label>

                <div class="col-sm-8">
                    <input id="photoUrlIdsFile" accept="image/jpg,image/jpeg,image/png" name="file" multiple  class="form-control" type="file">
                    <img style="width: 80px ;height: auto;"  th:src="*{photoUrlIds}" id="photoUrlIdsImg"  />
                    <input style="display: none" id="photoUrlIds" name="photoUrlIds" class="form-control" th:value="*{photoUrlIds}"   type="text">
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">产品图片id：</label>
                <div class="col-sm-8">
                    <input id="photoUrlIdFile" accept="image/jpg,image/jpeg,image/png" name="file"  class="form-control" type="file">
                    <img style="width: 80px ;height: auto;"  th:src="*{photoUrlId}" id="photoUrlIdImg"  />
                    <input style="display: none" id="photoUrlId" name="photoUrlId" class="form-control" th:value="*{photoUrlId}"   type="text">
                </div>

            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品描述：</label>
                <div class="col-sm-8">
                    <input type="hidden" class="form-control" name="productDescribe">
                    <div class="summernote" id="productDescribe"></div>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label">产品产地：</label>
                <div class="col-sm-8">
                    <input name="productOrigin" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">产品质量：</label>
                <div class="col-sm-8">
                    <input name="productQuality" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品价格：</label>
                <div class="col-sm-8">
                    <input name="productPrice" class="form-control" type="text" required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品规格：</label>
                <div class="col-sm-8">
                    <input name="specifications" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">库存：</label>
                <div class="col-sm-8">
                    <input name="inventory" class="form-control" type="text">
                </div>
            </div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: summernote-js" />

    <script th:inline="javascript">
        var prefix = ctx + "mall/product"





        $("#form-product-add").validate({
            focusCleanup: true
        });

        $("#photoUrlIdsFile").bind('change', function () {
            uploadFile("#photoUrlIdsFile",function (res1) {
                $("#photoUrlIds").val(res1.files_url);

            })
        });
        function uploadFile(idSelector,callback) {
            var formData = new FormData();
            var files = $(idSelector)[0].files;
            for (var i = 0; i < files.length; i++) {
                formData.append('files', files[i]); // 将文件添加到FormData对象中
            }
            $.modal.loading("图片上传中，请稍后...")
            $.ajax({
                url: "/common/admin/upload/up/more",
                data: formData,
                type: "post",
                dataType: "json",
                processData: false,
                contentType: false,
                success: function(result) {
                    $.modal.closeLoading();
                    callback(result)
                }
            })
        }

        function submitHandler() {
            if ($.validate.form()) {
                var formData = new FormData();
                formData.append('photoUrlIdFile',  $("#photoUrlIdFile")[0].files[0]);

                $.modal.loading("图片上传中，请稍后...")
                $.ajax({
                    url: "/common/admin/upload/up/more",
                    data: formData,
                    type: "post",
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        $("#photoUrlId").val(result.photoUrlIdFile_url);

                        $.operate.save(prefix + "/add", $('#form-product-add').serialize());
                    }
                })
            }
        };

        $("input[name='version']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        function openUser(){
            var options = {
                title: '请选择店铺',
                url: "/mall/shop/childShop",
                callBack: getMember
            };
            $.modal.openOptions(options);
        };

        // 回调，将子页面用户选择的成员返回父页面
        function getMember(index, layero){
            var row = layero.find("iframe")[0].contentWindow.getSelections();
            if (row.length == 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }

            // 这里已经拿到了Members，即子页面返回的表格勾选的内容
            $("#shopId").val(row[0].id);
            $("#shopName").val(row[0].shopName);
            $.modal.close(index);
            $.modal.closeLoading();

        };

        $(document).ready(function() {

            $('.summernote').summernote({
                lang: 'zh-CN',
                dialogsInBody: true,
                callbacks: {
                    onChange: function(contents, $edittable) {
                        $("input[name='" + this.id + "']").val(contents);
                    },
                    onImageUpload: function(files) {
                        var obj = this;
                        var data = new FormData();
                        data.append("file", files[0]);
                        $.ajax({
                            type: "post",
                            url: ctx + "common/admin/upload/up/single",
                            data: data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            dataType: 'json',
                            success: function(result) {
                                if (result.code == web_status.SUCCESS) {
                                    $('#' + obj.id).summernote('insertImage', result.url);
                                } else {
                                    $.modal.alertError(result.msg);
                                }
                            },
                            error: function(error) {
                                $.modal.alertWarning("图片上传失败。");
                            }
                        });
                    }
                }
            });


            /*二级*/
            $.ajax({
                url: ctx + "mall/type/select",
                type: 'GET',
                success: function (data) {
                    $("#typeId").empty();
                    $("#typeId").append("<option value=''>请产品大类</option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#typeId").append("<option value='" + data[i].id + "'>" + data[i].productType + "</option>");
                    }
                }
            });

            $("#typeId").change(function () {//同上面一样
                $.ajax({
                    url: ctx + "mall/level/select",
                    type: 'GET',
                    data: {
                        typeId: $("#typeId").val(),
                    },
                    success:function (data) {
                        $("#levelId").empty();
                        $("#levelId").append("<option value=''>请产品小类</option>");
                        for (var i = 0; i < data.length; i++){
                            $("#levelId").append("<option value='" + data[i].id + "'>" + data[i].productLevel + "</option>");
                        }
                    }
                })
            });


        });

    </script>
</body>
</html>